<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title th:text="${system.webTitle}"></title>
		<link rel="icon" th:href="${'/file/'+system.systemLogo}"/>
		<!-- 依 赖 样 式 -->
		<link rel="stylesheet" href="/plug-in/pear/css/pear.css" />
		<!-- 加 载 样 式-->
		<link rel="stylesheet" href="/plug-in/pear/admin/css/load.css" />
		<!-- 布 局 样 式 -->
		<link rel="stylesheet" href="/plug-in/pear/admin/css/admin.css" />
	</head>
	<!-- 结 构 代 码 -->
	<body class="layui-layout-body pear-admin">
		<!-- 布 局 框 架 -->
		<div class="layui-layout layui-layout-admin">
			<div class="layui-progress" lay-filter="base-progress">
				<div class="layui-progress-bar"></div>
			</div>
			<div class="layui-header">
				<!-- 顶 部 左 侧 功 能 -->
				<ul class="layui-nav layui-layout-left">
					<li class="collaspe layui-nav-item"><a href="javascript:;" class="layui-icon layui-icon-shrink-right"></a></li>
					<li class="layui-nav-item to-home"><a href="javascript:;" class="layui-icon layui-icon-home"></a></li>
				</ul>
				<!-- 顶 部 右 侧 菜 单 -->
				<div id="control" class="layui-layout-control"></div>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item layui-hide-xs"><a href="javascript:;" class="fullScreen layui-icon layui-icon-screen-full"></a></li>
					<li class="refresh layui-nav-item"><a href="javascript:;" class="layui-icon layui-icon-refresh-1" loading = 600></a></li>
					<!--<li class="layui-nav-item layui-hide-xs"><a href="http://www.pearadmin.com" class="layui-icon layui-icon-website"></a></li>-->
					<li class="layui-nav-item layui-hide-xs message"></li>
					<li class="layui-nav-item user">
						<!-- 头 像 -->
						<a href="javascript:;" style="position: relative">
							<img src="/plug-in/pear/admin/images/user.png" class="layui-nav-img">
							<span style="left: 42px; top: 42px; background-color: #c6c6c6" class="layui-badge-dot"></span>
						</a>
						<!-- 功 能 菜 单 -->
						<dl class="layui-nav-child">
							<dd><a href="javascript:;" class="logout"><i style="margin-right: 10px" class="layui-icon layui-icon-logout"></i>注销登录</a></dd>
						</dl>
					</li>
					<!-- 主 题 配 置 -->
					<li class="layui-nav-item setting"><a href="javascript:;" class="layui-icon layui-icon-more-vertical"></a></li>
				</ul>
			</div>
			<!-- 侧 边 区 域 -->
			<div class="layui-side layui-bg-black">
				<!-- 菜 单 顶 部 -->
				<div class="layui-logo">
					<!-- 图 标 -->
					<img class="logo" />
					<!-- 标 题 -->
					<span class="title"></span>
				</div>
				<!-- 菜 单 内 容 -->
				<div class="layui-side-scroll">
					<div id="sideMenu"></div>
				</div>
			</div>
			<!-- 视 图 页 面 -->
			<div class="layui-body">
				<!-- 内 容 页 面 -->
				<div id="content"></div>
			</div>
			<!-- 遮 盖 层 -->
			<div class="pear-cover"></div>
			<!-- 加 载 动 画-->
			<div class="loader-main">
				<div class="loader"></div>
			</div>

			<div class="monitor layui-hide">
				<p class="outer"></p>
				<p class="inner"></p>
				<p>online：<span id="online">12</span></p>
				<i class="layui-icon layui-icon-reply-fill"></i>
			</div>
		</div>
		<!-- 移 动 端 便 捷 操 作 -->
		<div class="pear-collasped-pe collaspe">
			<a href="javascript:;" class="layui-icon layui-icon-shrink-right"></a>
		</div>

		<!-- 临时聊天室 -->
		<div class="chatroom-model">
			<div class="mask"></div>
			<div class="chatroom-box">
				<div class="top">
					<span>临时聊天室</span>（<span id="num">0</span>）
				</div>
				<hr >
				<!-- 聊天内容 -->
				<div class="content"></div>
				<hr >
				<div class="send-news">
					<form class="layui-form layui-form-pane" action="">
						<div class="input-box"><input name="content" lay-verify="required" lay-reqText="写点什么吧😀" class="layui-input" autocomplete="off" /></div>
						<button type="submit" lay-submit="" lay-filter="send" class="pear-btn pear-btn-primary">
							<i class="layui-icon layui-icon-release"></i>
						</button>
					</form>
				</div>
			</div>
		</div>

		<!-- 依 赖 脚 本 -->
		<script src="/plug-in/jquery/jquery-3.5.1.min.js"></script>
		<script src="/plug-in/layui/layui.js"></script>
		<script src="/plug-in/lay-config.js"></script>
		<script src="/plug-in/websocket/sockjs.min.js"></script>
		<script src="/plug-in/websocket/stomp.min.js"></script>
		<script src="/plug-in/websocket/web-socket.js"></script>
		<!-- 框 架 初 始 化 -->
		<script th:inline="javascript" >
			var online = {}
			let nickname = [[${user.nickname}]]
			let username = [[${user.username}]]
			layui.use(['admin','jquery','notice'], function() {
				var admin = layui.admin;
				var $ = layui.jquery;
				var notice = layui.notice

				notice.options = {
					positionClass:"toast-bottom-right",//弹出的位置,
					showDuration:"300",//显示的时间
					hideDuration:"500",//消失的时间
					timeOut:"500",//停留的时间
				};

				/**
				 * WebSocket连接心跳检测
				 */
				setInterval(function () {
					if (stompClient == null || !stompClient.connected){
						$(".layui-nav-item.user a span").css("background-color", "#c6c6c6")
						// 连接websocket，并订阅系统通知频道
						connect(function (d) {
							if (d === "ok"){
								getOnline()
								$(".layui-nav-item.user a span").css("background-color", "#4caf50")
								// 订阅聊天室频道
								subscribeSocket(SUBSCRIBE_PREFIX + "/system/chatroom", false, function (message) {
									// 聊天内容渲染
									setContent(message)
								})

								// 订阅私人消息频道
								subscribeSocket("/custom" + SUBSCRIBE_PREFIX + "/" + username, true)

								// 订阅系统公共频道
								subscribeSocket("/notify/system/public", false, function () {
									getOnline()
								})
							}
						})
					}
				}, 2000)


				// 初始化顶部用户信息
				admin.setAvatar("",nickname);

				// 根目录下 pear.config.yml 文件为初始化配置
				// 你可以通过 admin.setConfigPath 方法修改配置文件位置
				// 你可以通过 admin.setConfigType 方法修改配置文件类型
				admin.setConfigType("json");
				//admin.setConfigPath("config/pear.config.json");
				admin.setConfigPath("system/config");
				admin.render();

				// 登出逻辑
				admin.logout(function(){
					layer.load()
					$.ajax({
						url: "/user/logout",
						success:function(res){
							window.location.reload();
						},
						error:function(err){
							notice.error("请求出错了");
							console.log(err)
						}
					})
					// 注销逻辑 返回 true / false
					return true;
				})
				// 初始化消息回调
				admin.message();

				// 重写消息回调 [消息列表点击事件]
				// admin.message(function(id, title, context, form) {});

				function getOnline() {
					$.ajax({
						url: "/user/online",
						success(res) {
							if (res.code === 302) {
								layer.open({
									content: '由于长时间未操作，系统已退出登录',
									title: false,
									closeBtn: false,
									yes: function (index, layero) {
										window.location.reload()
									}
								});
							}
							$("#online").text(res.data).parent().parent().removeClass("layui-hide")
							$("#num").text(res.data)
						},
						error(err){
							console.log(err)
						}
					})
					$.ajax({
						url: "/user/online-user",
						success(res){
							online.users = res.data
						}
					})
				}
			})
		</script>

		<script>
			$(".chatroom-model .mask").click(function () {
				$(this).parent().fadeOut(500)
				$(this).parent().children(".chatroom-box").css("right", "-600px")
			})
			$(".monitor").click(function () {
				$(".chatroom-model").fadeIn(500)
				setTimeout(function () {
					$(".chatroom-box .content").scrollTop($(".chatroom-box .content").prop("scrollHeight"), 500);
					$(".monitor i.layui-icon").removeClass("activity")
					$(".chatroom-model .chatroom-box").css("right", "0")
				}, 100)
			})

			//监听提交
			layui.form.on('submit(send)', function(data){
				sendChatRoomNews(nickname, data.field.content)
				return false;
			});

			function setContent(message) {
				$('input[name="content"]').val("")
				let divClass = "right-item"
				if (message.from !== username){
					if ($(".chatroom-model").css("display") === "none")
						$(".monitor i.layui-icon").addClass("activity")

					divClass = "left-item"
				}
				$(".chatroom-box .content").append(
						$("<div></div>").append(
								$("<div class='title-box'></div>").append(
										$("<div class='img-box'></div>").append($("<img src='/plug-in/pear/admin/images/user.png' />"))
								).append($("<div class='text'></div>").append(
										$("<p class='name'></p>").text(message.fromName)
								).append($("<p class='time'></p>").text(message.dateString)))
						).append($("<div class='news-box'></div>").html(message.content)).addClass(divClass)
				)
				// 滚动到消息底部
				$(".chatroom-box .content").scrollTop($(".chatroom-box .content").prop("scrollHeight"), 500);
			}
		</script>
	</body>
</html>
